<!doctype html> 
<html lang="en"> 
<head>     
	<meta charset="UTF-8">
	<title>Css</title>
	<link rel="stylesheet" href="/assets/vendor/bootstrap/css/bootstrap.min.css">
	<script src="/assets/vendor/jquery/jquery-1.11.3.min.js"></script>
	<script src="/assets/vendor/bootstrap/js/bootstrap.min.js"></script>
	<script src="/assets/vendor/other/holder.js"></script>
	<script src="/assets/vendor/other/application.js"></script>  
<style>
	.container{             
		background: #ccc ;        
	}         
	.row{
		margin-bottom: 5px ;
	}
	.container{
		width: 1600px ;
	}
	.list-inline li{
		margin-left: 100px ;
		margin-right: 100px ;
	}
	.page-header{
		border-color: black ;
	}
</style>
</head>
<body>
	<div class="container">




		<h3 class="page-header">Grid System</h3>
		<div class="row">
			<div class="col-lg-12">
				<h4>将整个屏幕铺满<small>这里可以添加副标题</small></h4>
				<p class="text-center"><mark>栅格系统</mark>，<del>是通过将<strong>整个屏幕<strong>分为12小的块状div来实现div的快速布局</del></p>
				<p class="lead"><mark>栅格系统</mark>，<s>是通过将整个屏幕分为12小的块状div来实现div的快速布局</s></p>
				<p class="text-right"><mark>栅格系统</mark>，<u>是通过将整个屏幕分为12小的块状div来实现div的快速布局</u></p>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-4 col-lg-offset-4">
				<h4><ins><em>通过一个4块div和4块偏移量来实现div块的居中</em></ins></h4>
				<img src="holder.js/100x200" alt="">
			</div>
		</div>	
		<div class="row">
			<div class="col-lg-6">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-6">
				<img src="holder.js/100x200" alt="">
			</div>
		</div>
		<div class="row">
			<div class="col-lg-4">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-4">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-4">
				<img src="holder.js/100x200" alt="">
			</div>
		</div>
		<div class="row">
			<div class="col-lg-3">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-3">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-3">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-3">
				<img src="holder.js/100x200" alt="">
			</div>
		</div>
		<div class="row">
			<div class="col-lg-2">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-2">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-2">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-2">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-2">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-2">
				<img src="holder.js/100x200" alt="">
			</div>
		</div>
		<div class="row">
			<div class="col-lg-1">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-1">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-1">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-1">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-1">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-1">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-1">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-1">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-1">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-1">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-1">
				<img src="holder.js/100x200" alt="">
			</div>
			<div class="col-lg-1">
				<img src="holder.js/100x200" alt="">
			</div>
		</div>
		<div class="row">
			<div class="col-lg-9">
				<div class="row">
					<div class="col-lg-4">
						<img src="holder.js/100x200" alt="">
					</div>
					<div class="col-lg-8">
						<img src="holder.js/100x200" alt="">
					</div>
				</div>
			</div>
		</div>




		<h3 class="page-header">Typography</h3>
		<div class="row">
			<div class="col-lg-12">
				<abbr title="fengmengzhao">fmz</abbr>
				<abbr title="fengmengzhao" class="initialism">fmz</abbr>
				<blockquote>
					<p>声明诚可贵，爱情价更高；若为自由故，两者皆可抛</p>
					<footer>fmz</footer>
				</blockquote>
				<ul class="list-unstyled">
					<li>fmz</li>
					<li>fmz</li>
					<li>fmz</li>
					<li>fmz</li>
					<li>fmz</li>
					<li>fmz</li>
				</ul>
				<ul class="list-inline">
					<li>Home</li>
					<li>Blog</li>
					<li>Resume</li>
					<li>Work</li>
					<li>Honor</li>
					<li>Love</li>
				</ul>
			</div>
		</div>


		<h3 class="page-header">Code</h3>
		<div class="row">
			<div class="col-lg-12">
				<p><code>Linux:</code>I love you!</p>
				<pre>
					public class Person{
						public static void main(String args[]){
							System.out.println("Hello World!!!")
						}
					}
				</pre>
			</div>
		</div>




		<h3 class="page-header">Tables</h3>
		<div class="row">
			<div class="col-lg-12">
				<table class="table">
					<tr>
						<th>1</th>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
					</tr>
					<tr class="active">
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
					</tr>
					<tr class="success">
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
					</tr>
					<tr class="danger">
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
					</tr>
					<tr class="warning">
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
					</tr>
					<tr class="info">
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
					</tr>
				</table>
				<table class="table table-striped table-bordered table-hover">
					<tr>
						<th>1</th>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
					</tr>
					<tr>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
					</tr>
					<tr>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
					</tr>
					<tr>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
					</tr>
					<tr>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
						<td>fmz</td>
					</tr>
				</table>
			</div>
		</div>



		<h3 class="page-header">Forms</h3>	
		<form action="">
			<div class="form-group">
				<label for="emailid">Email</label>
				<input type="text" class="form-control" id="emailid" placeholder="Email">
			</div>
			<div class="form-group">
				<label for="passwdid">Password</label>
				<input type="password" class="form-control" id="passwdid" placeholder="password">
			</div>
			<div class="form-goup">
				<label for="inputid">File input</label>
				<input type="file" id="inputid">
				<p class="help-block">plese upload your file here.</p>
			</div>
			<div class="checkbox">
				<label for="">
					<input type="checkbox">Check me out
				</label>
			</div>
			<div>
				<button type="submin" class="btn btn-primary">Submit</button>
				<button type="reset" class="btn btn-danger">Cancel</button>			
			</div>
		</form>
		<h4>内联表单样式1</h4>
		<form class="form-inline">
			<div class="form-group">
				<label for="emailid">Email</label>
				<input type="text" class="form-control" id="emailid" placeholder="Email">
			</div>
			<div class="form-group">
				<label for="passwdid">Password</label>
				<input type="password" class="form-control" id="passwdid" placeholder="password">
			</div>
			<button type="submit" class="btn btn-primary">Send invitation</button>
		</form>
		<h4>内联表单样式2</h4>
		<form class="form-inline">
			<div class="form-group">
				<label class="sr-only" for="emailid">Email</label>
				<input type="text" class="form-control" id="emailid" placeholder="Email">
			</div>
			<div class="form-group">
				<label class="sr-only" for="passwdid">Password</label>
				<input type="password" class="form-control" id="passwdid" placeholder="password">
			</div>
			<div class="checkbox">
				<label for="">
					<input type="checkbox">Remeber me
				</label>
			</div>
			<button type="submit" class="btn btn-primary">Sign in</button>
		</form>
		<h4>内联表单样式3</h4>
		<form action="" class="form-inline">
			<label class="sr-only" for="amountid">Amount</label>
			<div class="input-group">
				<div class="input-group-addon">$</div>
				<input type="text" class="form-control" id="amountid" placeholder="Amount">
				<div class="input-group-addon">.00</div>
			</div>
			<button type="submit" class="btn btn-primary">Transfer cash</button>
		</form>
		<h4>内联表单样式4</h4>
		<form class="form-horizontal">
			<div class="form-group has-success">
				<label class="col-lg-1 control-label" for="emailid">Email</label>
				<div class="col-lg-10">					
					<input type="text" class="form-control" id="emailid" placeholder="Email">
				</div>
			</div>
			<div class="form-group has-warning">
				<label class="control-label col-lg-1" for="passwdid">Password</label>
				<div class="col-lg-10">
					<input type="password" class="form-control col-lg-9" id="passwdid" placeholder="password">
				</div>
			</div>
			<div class="form-group">
				<div class="col-lg-10 col-lg-offset-1">
					<div class="checkbox">
						<label for="">
						<input type="checkbox">Remeber me
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-lg-10 col-lg-offset-1">	
					<button type="submit" class="btn btn-primary">Sign in</button>
				</div>
			</div>		
		</form>
		<h4>Checkbox and Radios</h4>
		<div class="checkbox">
			<label for="">
				<input type="checkbox">Fmz
			</label>
		</div>
		<div class="checkbox disabled">
			<label for="">
				<input type="checkbox" disabled checked>Fmz
			</label>
		</div>
		<div class="radio">
			<label for="">
				<input type="radio" name="fmz">fmz1
			</label>
		</div>
		<div class="radio">
			<label for="">
				<input type="radio" name="fmz">fmz2
			</label>
		</div>
		<div class="radio">
			<label for="">
				<input type="radio" name="fmz">fmz3
			</label>
		</div>
		<h4>Inline Checkbox and Radios</h4>
		<label for="" class="checkbox-inline">
			<input type="checkbox">1
		</label>
		<label for="" class="checkbox-inline">
			<input type="checkbox">2
		</label>
		<label for="" class="checkbox-inline">
			<input type="checkbox">3
		</label>
		<div>
			<label for="" class="radio-line">
				<input type="radio" name="fmz2">1
			</label>
			<label for="" class="radio-line">
				<input type="radio" name="fmz2">2
			</label>
			<label for="" class="radio-line">
				<input type="radio" name="fmz2">3
			</label>
		</div>
		<h4>Selection</h4>
		<select name="" id="" class="form-control">
			<option value="">1</option>
			<option value="">2</option>
			<option value="">3</option>
			<option value="">4</option>
			<option value="">5</option>
		</select>
		<select name="" id="" class="form-control" multiple>
			<option value="">1</option>
			<option value="">2</option>
			<option value="">3</option>
			<option value="">4</option>
			<option value="">5</option>
		</select>
		<h4>内联表单样式5-form-control-static样式</h4>
			<form class="form-horizontal">
			<div class="form-group">
				<label class="col-lg-1 control-label" for="emailid">Email</label>
				<div class="col-lg-10">
					<p class="form-control-static">fengmengzhao.gmail.com</p>					
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-lg-1" for="passwdid">Password</label>
				<div class="col-lg-10">
					<input type="password" class="form-control col-lg-9" id="passwdid" placeholder="password">
				</div>
			</div>
			<div class="form-group">
				<div class="col-lg-10 col-lg-offset-1">
					<div class="checkbox">
						<label for="">
						<input type="checkbox">Remeber me
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-lg-10 col-lg-offset-1">	
					<button type="submit" class="btn btn-primary">Sign in</button>
				</div>
			</div>		
		</form>



		<h3 class="page-header">Button<small>能使用button类的有button a 和 input标签</small></h3>
		<a href="#" class="btn btn-default">fmz</a>
		<button class="btn btn-primary">点我</button>		
		<input type="text" class="form-control btn btn-warning">



		<h3 class="page-header">Images</h3>
		<img src="holder.js/500x500" alt="" class="img-rounded">
		<img src="holder.js/500x500" alt="" class="img-circle">
		<img src="holder.js/500x500" alt="" class="img-thumbnail">



		<h3 class="page-header">Helper classes</h3>
		<h4>语境字体颜色</h4>
		<p class="text-primary">冯孟昭是一个好孩子。</p>
		<p class="text-success">冯孟昭是一个好孩子。</p>
		<p class="text-info">冯孟昭是一个好孩子。</p>
		<p class="text-warning">冯孟昭是一个好孩子。</p>
		<p class="text-danger">冯孟昭是一个好孩子。</p>
		<h4>上下文段落背景</h4>
		<p class="bg-primary">冯孟昭是一个坏孩子。</p>
		<p class="bg-success">冯孟昭是一个坏孩子。</p>
		<p class="bg-info">冯孟昭是一个坏孩子。</p>
		<p class="bg-warning">冯孟昭是一个坏孩子。</p>
		<p class="bg-danger">冯孟昭是一个坏孩子。</p>
		<h4>Quick floats</h4>
		<div class="row">
			<div class="col-lg-4 pull-right">
				<p class="bg-primary">冯孟昭是一个好的坏孩子。</p>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-4 pull-left">
				<p class="bg-primary">冯孟昭是一个好的坏孩子。</p>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-4 center-block">
				<p class="bg-primary">冯孟昭是一个好的坏孩子。</p>
			</div>
		</div>
		<h1 class="text-hide">美女<img src="holder.js/50x30" alt=""></h1>
		<a href="#" class="text-hide">Home<img src="holder.js/50x30" alt=""></a>
	</div>
</body>
</html>
